<template>
  <div class="xtx-member-aside">
    <div class="user-manage">
      <div class="user-head">
        <div class="avatar">
          <img :src="$store.state.user.profile.avatar" alt="">
        </div>
        <p class="user-name">{{$store.state.user.profile.account}}</p>
        <div class="user-tag"><i class="iconfont icon-dynamic-filling"></i> 普通会员</div>
      </div>
      <h4>我的账户</h4>
      <div class="links">
        <RouterLink to="/member" exact-active-class="active">个人中心</RouterLink>
        <RouterLink to="/member/message" exact-active-class="active">消息通知</RouterLink>
        <RouterLink to="/member/information" exact-active-class="active">个人信息</RouterLink>
        <RouterLink to="/member/account" active-class="active">安全设置</RouterLink>
        <RouterLink to="/member/address" exact-active-class="active">地址管理</RouterLink>
        <a href="javascript:;" @click="myClick">我的积分</a>
        <RouterLink to="/member/footmarks" exact-active-class="active">我的足迹</RouterLink>
        <a href="javascript:;" @click="myClick">邀请有礼</a>
        <a href="javascript:;" @click="myClick">幸运抽奖</a>
      </div>
      <h4>交易管理</h4>
      <div class="links">
        <RouterLink to="/member/order" active-class="active">我的订单</RouterLink>
        <RouterLink to="/member/coupons" active-class="active">优惠券</RouterLink>
        <RouterLink to="/member/giftcard" active-class="active">礼品卡</RouterLink>
        <RouterLink to="/member/evaluate" active-class="active">评价晒单</RouterLink>
      </div>
      <h4>我的收藏</h4>
      <div class="links">
        <RouterLink :to="{name: 'MemberCollectGoods'}" active-class="active">收藏的商品</RouterLink>
        <RouterLink :to="{name: 'MemberCollectSpecial'}" active-class="active">收藏的专题</RouterLink>
        <RouterLink :to="{name: 'MemberCollectBrands'}" active-class="active">关注的品牌</RouterLink>
      </div>
      <h4>帮助中心</h4>
      <div class="links">
        <RouterLink to="/help">帮助中心</RouterLink>
        <a href="javascript:;" @click="myClick">在线客服</a>
        <a href="javascript:;" @click="myClick">售后服务</a>
      </div>
    </div>
  </div>
</template>

<script>
import Message from '@/components/library/message'
export default {
  name: 'XtxMemberAside',
  setup () {
    const myClick = () => {
      Message({ type: 'warn', text: '功能未开发···' })
    }
    return { myClick }
  }
}
</script>

<style lang="less" scoped>
.xtx-member-aside {
  width: 220px;
  margin-right: 20px;
  border-radius: 2px;
  .user-manage {
    background-color: #fff;
    .user-head {
    .avatar {
      position: relative;
      padding: 10px 0;
      width: 100px;
      height: 100px;
      margin: 0 auto;
      text-align: center;
      img {
        border-radius: 50%;
      }
    }
    .user-name {
      text-align: center;
      line-height: 30px;
    }
    .user-tag {
      text-align: center;
      width: 100px;
      height: 30px;
      background: #e26237;
      line-height: 28px;
      margin: 0px auto;
      border-radius: 14px 14px;
      margin-bottom: 10px;
      color: #fff;
    }
    }
    h4 {
      font-size: 18px;
      font-weight: 400;
      padding: 20px 52px 5px;
      text-align: center;
      border-top: 1px solid #f6f6f6;
    }
    .links {
      padding: 0 75px 10px;
    }
    a {
      display: block;
      line-height: 1;
      padding: 15px 0;
      font-size: 14px;
      color: #666;
      position: relative;
      &:hover{
        color: @xtxColor;
      }
      &.active {
        color: @xtxColor;
        &:before {
          display: block;
        }
      }

      &:before {
        content: "";
        display: none;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        position: absolute;
        top: 19px;
        left: -16px;
        background-color: @xtxColor;
      }
    }
  }
}
</style>
